Use what you have learnt so far to build a page like this:

Questions for this Assignment

• How would you use the ngFor directive to display the list of authors?

*ngFor="let author of authors"

// Generate component using Angular CLI
ng g c authors

Angular-CLI created a folder called "authors" and add 4 files inside the foler: a CSS file, a HTML file, a unit test file and a TypeScript file. It also registered the component in AppModule.

• Use Short cuts ctrl + p for navigating to different files in VS code
• Go to "authors.component.ts"

// Generate service using Angular CLI
ng g s authors

• Go to app.module.ts and register AuthorService as a provider:

• Go to authors.service.ts and add a method called getAuthors()

• Open the authors.component.ts, inject the service into the contructor of the component

• Render the authors in our template authors.component.html

<h2>{{ authors.length }} Authors</h2>
<ul>
  <li *ngFor="let author of authors">
    {{ author }}
  </li>
</ul>

• Back to authors.component.ts, notice that the selector is named with prefix "app-" by the Angular CLI.

• The reson for this is to avoid conflict with another component from the third-party
• Feel free to remove the prefix "app-" unless you have a strong reason to use it
• Go to app.component.html to add the custom element tag

<h1>Angular</h1>
<app-authors></app-authors>